前面提到資料類型的時候,有稍微提到陣列,而現在我們要開始介紹這個方便儲存的好東西!
var person=['jason','leo','dina'] //陣列範例
為甚麼要使用到陣列來儲存變數呢?因為我們有相同類型的項目要儲存時,若是單一變數儲存一個值,會有大量的變數,宣告上面會麻煩許多,程式碼也會變得冗長,當陣列的存在就是一次能夠儲存許多的值,且在for迴圈遍歷時可以訪問這些變量。
var person1 = "jason";
var person2 = "leo";
var person3 = "dina";
//宣告上麻煩,及程式碼十分冗長
首先我們要瞭解到陣列一開始的索引(index)是怎麼開始的,就像一般的程式邏輯一樣,第一個元素是person[0]、第二個是person[1]。
<body>
<p>我的名子是: <spa id="demo"></span> </p>
<script>
var person = ["jason", "leo", "dina"];
document.getElementById("demo").innerHTML = person[0];
</script>
</body>
更改陣列中的元素
<body>
<p>我的名子是: <spa id="demo"></span> </p>
<script>
var person = ["jason", "leo", "dina"];
person[0]="perter"; //更改陣列中元素
document.getElementById("demo").innerHTML = person[0];
</script>
</body>
你也可以將整個陣列給印出來
<body>
<p>大家的名子是: <spa id="demo"></span> </p>
<script>
var person = ["jason", "leo", "dina"];
document.getElementById("demo").innerHTML = person;
</script>
</body>
當我們今天想要知道一個陣列有多少元素時,length是一個很好用的方法。
<script>
var person = ["jason", "leo", "dina"];
var x= person.length
console.log(x)
</script> //length=3;
或是想訪問陣列最後一個元素時,卻又不曉得最後一個索引(index)是多少。
<script>
var person = ["jason", "leo", "dina"];
var x= person.length
console.log(person[x-1]) ; //'dina'
</script>
<body>
<p id="demo"></p>
<script>
var person, text, len, i;
person = ["jason", "leo", "dina"];
len = person.length;
text = "<ul>";
for (i = 0; i < len; i++) {
text += "<li>" + person[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
今天先介紹到這邊,陣列還有許多的方法及遍歷陣列不同的類型,我們明天再繼續介紹!